<script setup lang="ts">
import { ref, computed } from 'vue'
import {useUserStore} from "../../../stores/userStore.ts";
import {useRouter} from "vue-router";

let userStore = useUserStore();
const currentDate = ref(new Date())
const weekDays = ['MON', 'TUE', 'WED', 'THU', 'FRI', 'SAT', 'SUN']

// 计算当前月份的天数数组
const daysInMonth = computed(() => {
  const year = currentDate.value.getFullYear()
  const month = currentDate.value.getMonth()
  const firstDay = new Date(year, month, 1)
  const lastDay = new Date(year, month + 1, 0)

  // 获取这个月的第一天是星期几（0-6）
  let firstDayOfWeek = firstDay.getDay() - 1 // 调整为从周一开始
  if (firstDayOfWeek === -1) firstDayOfWeek = 6

  const days = []

  // 添加上个月的剩余天数
  for (let i = 0; i < firstDayOfWeek; i++) {
    const prevDate = new Date(year, month, -i)
    days.unshift({
      date: prevDate.getDate(),
      isCurrentMonth: false,
      isToday: false
    })
  }

  // 添加当前月的天数
  for (let i = 1; i <= lastDay.getDate(); i++) {
    const today = new Date()
    const isToday = today.getDate() === i &&
        today.getMonth() === month &&
        today.getFullYear() === year

    days.push({
      date: i,
      isCurrentMonth: true,
      isToday
    })
  }

  return days
})

// 每日一题数据
const dailyQuestion = ref({
  content: '判断国际象棋棋盘中一个格子的颜色'
})

let router = useRouter();
const toLogin=()=>{
  router.push("/user/login")
}
</script>

<template>
  <div class="calendar-container">
    <div class="calendar-grid">
      <div class="weekdays">
        <div v-for="day in weekDays"
             :key="day"
             class="weekday"
             :class="{ 'weekend': day === 'SAT' || day === 'SUN' }">
          {{ day }}
        </div>
      </div>

      <div class="days">
        <div
            v-for="(day, index) in daysInMonth"
            :key="index"
            class="day"
            :class="{
              'other-month': !day.isCurrentMonth,
              'today': day.isToday,
              'current-month': day.isCurrentMonth
            }"
        >
          {{ day.date }}
        </div>
      </div>
    </div>

    <div class="daily-question">
      <div class="question-header">
        <i class="icon">📅</i>
        <span>每日 1 题</span>
      </div>
      <div class="question-content">
        {{ dailyQuestion.content }}
      </div>
    </div>

    <div class="welcome-section" v-if="!userStore.isLogin">
      <button class="login-button" @click="toLogin">登录 / 注册</button>
    </div>
  </div>
</template>

<style scoped>
.calendar-container {
  background: white;
  border-radius: 8px;
  padding: 16px;
  width: 90%;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.calendar-grid {
  margin-bottom: 16px;
}

.weekdays {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  margin-bottom: 8px;
}

.weekday {
  text-align: center;
  font-size: 12px;
  color: #666;
  padding: 4px 0;
}

.weekend {
  color: #ff4d4f;
}

.days {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
}

.day {
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  color: #333;
  cursor: pointer;
}

.today {
  position: relative;
  font-weight: bold;
}

.today::after {
  content: '今';
  position: absolute;
  font-size: 10px;
  top: -2px;
  right: 0;
}

.other-month {
  color: #ccc;
}

.daily-question {
  background: #f7f8fa;
  padding: 12px;
  border-radius: 4px;
  margin-bottom: 16px;
}

.question-header {
  display: flex;
  align-items: center;
  gap: 4px;
  color: #1890ff;
  font-size: 13px;
  margin-bottom: 8px;
}

.question-content {
  font-size: 13px;
  color: #333;
}

.welcome-section {
  text-align: center;
}

.welcome-text {
  font-size: 14px;
  color: #333;
  margin-bottom: 12px;
}

.login-button {
  width: 100%;
  padding: 8px;
  background: #333;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
}

.login-button:hover {
  background: #444;
}
</style>
